[V0_FILE]typescriptreact:file="contact-picker.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Search, X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Input } from "@/components/ui/input" interface Contact { id: string name: string avatar: string phone: string email: string address: string } const contacts: Contact[] = [ { id: "1", name: "Alice Johnson", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 123-4567", email: "alice@example.com", address: "123 Main St, Anytown, USA", }, { id: "2", name: "Bob Smith", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 234-5678", email: "bob@example.com", address: "456 Elm St, Somewhere, USA", }, { id: "3", name: "Charlie Brown", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 345-6789", email: "charlie@example.com", address: "789 Oak St, Nowhere, USA", }, { id: "4", name: "Diana Prince", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 456-7890", email: "diana@example.com", address: "101 Pine St, Everywhere, USA", }, { id: "5", name: "Ethan Hunt", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 567-8901", email: "ethan@example.com", address: "202 Maple St, Anywhere, USA", }, { id: "6", name: "Fiona Apple", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 678-9012", email: "fiona@example.com", address: "303 Cedar St, Someplace, USA", }, { id: "7", name: "George Michael", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 789-0123", email: "george@example.com", address: "404 Birch St, Elsewhere, USA", }, { id: "8", name: "Hannah Montana", avatar: "/placeholder.svg?height=100&width=100", phone: "+1 (555) 890-1234", email: "hannah@example.com", address: "505 Walnut St, Overthere, USA", }, ] export default function ContactPicker() { const [searchTerm, setSearchTerm] = useState("") const [selectedContact, setSelectedContact] = useState(null) const filteredContacts = contacts.filter((contact) => contact.name.toLowerCase().includes(searchTerm.toLowerCase())) const selectContact = (contact: Contact) => { setSelectedContact(contact) } const closeDetails = () => { setSelectedContact(null) } return (

setSearchTerm(e.target.value)} />

{selectedContact ? (

{selectedContact.name}

Phone: {selectedContact.phone}
Email: {selectedContact.email}
Address: {selectedContact.address}

) : ( filteredContacts.map((contact) => ( selectContact(contact)} >

{contact.name}

{contact.phone}

)) )}

) } [V0_FILE]typescriptreact:file="ai-persona-picker.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Search, X, MessageCircle, Zap, ChevronRight, Send } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Input } from "@/components/ui/input" interface Message { id: string content: string sender: "user" | "ai" timestamp: string } interface Conversation { id: string title: string summary: string messages: Message[] } interface AIPersona { id: string name: string avatar: string summary: string contextLength: number price: number totalConversations: number tokensConsumed: number conversations: Conversation[] } const aiPersonas: AIPersona[] = [ { id: "1", name: "Alice AI", avatar: "/placeholder.svg?height=100&width=100", summary: "Friendly AI assistant specializing in creative writing", contextLength: 2048, price: 0.02, totalConversations: 1500, tokensConsumed: 750000, conversations: [ { id: "conv1", title: "Brainstorming for Short Story", summary: "Discussed potential genres and plot ideas for a short story.", messages: [ { id: "m1", content: "Hello! How can I help with your writing today?", sender: "ai", timestamp: "2023-05-10 14:30", }, { id: "m2", content: "I need help brainstorming ideas for a short story.", sender: "user", timestamp: "2023-05-10 14:31", }, { id: "m3", content: "Great! Let's start by considering a few genres. Are you interested in science fiction, fantasy, mystery, or something else?", sender: "ai", timestamp: "2023-05-10 14:32", }, ], }, { id: "conv2", title: "Character Development Workshop", summary: "Worked on developing complex characters for a novel.", messages: [ { id: "m1", content: "I'm struggling with character development for my novel. Can you help?", sender: "user", timestamp: "2023-05-11 10:00", }, { id: "m2", content: "Character development is crucial for a compelling novel. Let's start by discussing your main character. What's their name and basic background?", sender: "ai", timestamp: "2023-05-11 10:01", }, ], }, ], }, { id: "2", name: "Bob Bot", avatar: "/placeholder.svg?height=100&width=100", summary: "Technical AI assistant for programming help", contextLength: 4096, price: 0.05, totalConversations: 2000, tokensConsumed: 1200000, conversations: [ { id: "conv1", title: "Python Debugging Session", summary: "Helped debug a Python script with a focus on error handling.", messages: [ { id: "m1", content: "Hello! What programming language are you working with today?", sender: "ai", timestamp: "2023-05-11 09:15", }, { id: "m2", content: "I'm having trouble with a Python script. Can you help?", sender: "user", timestamp: "2023-05-11 09:16", }, { id: "m3", content: "I'd be happy to help with your Python script. Can you describe the issue you're facing or share the relevant part of your code?", sender: "ai", timestamp: "2023-05-11 09:17", }, ], }, ], }, ] export default function AIPersonaPicker() { const [searchTerm, setSearchTerm] = useState("") const [selectedPersona, setSelectedPersona] = useState(null) const [selectedConversation, setSelectedConversation] = useState(null) const [newMessage, setNewMessage] = useState("") const filteredPersonas = aiPersonas.filter((persona) => persona.name.toLowerCase().includes(searchTerm.toLowerCase())) const selectPersona = (persona: AIPersona) => { setSelectedPersona(persona) setSelectedConversation(null) } const selectConversation = (conversation: Conversation) => { setSelectedConversation(conversation) } const closeDetails = () => { setSelectedPersona(null) setSelectedConversation(null) } const sendMessage = () => { if (newMessage.trim() && selectedConversation) { const updatedConversation = { ...selectedConversation, messages: [ ...selectedConversation.messages, { id: `m${selectedConversation.messages.length + 1}`, content: newMessage, sender: "user" as const, timestamp: new Date().toISOString(), }, ], } setSelectedConversation(updatedConversation) setNewMessage("") } } return (

setSearchTerm(e.target.value)} />

{selectedPersona ? (

{selectedPersona.name}

{selectedConversation ? (

{selectedConversation.messages.map((message) => (

{message.content}

{message.timestamp}

))}

setNewMessage(e.target.value)} onKeyPress={(e) => e.key === "Enter" && sendMessage()} />

) : (

{selectedPersona.name}

{selectedPersona.summary}

Context Length

{selectedPersona.contextLength}

Price per 1K tokens

${selectedPersona.price.toFixed(3)}

Total Conversations

{selectedPersona.totalConversations.toLocaleString()}

Tokens Consumed

{selectedPersona.tokensConsumed.toLocaleString()}

Past Conversations

{selectedPersona.conversations.map((conv) => (

selectConversation(conv)} >

{conv.title}

{conv.summary}

))}

)} ) : ( filteredPersonas.map((persona) => ( selectPersona(persona)} >

{persona.name}

{persona.summary}

{persona.totalConversations} {(persona.tokensConsumed / 1000).toFixed(1)}K

)) )}

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import React from "react" interface InputProps extends React.InputHTMLAttributes {} export const Input = React.forwardRef( ({ className, type, placeholder, ...props }, ref) => { return }, ) Input.displayName = "Input"

About

Tags

Share

About

Tags

Share

More from bradennapier

More Templates Like This